<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sistema de Biblioteca Pessoal</title>
</head>
<body>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

	<f:view>
		<h2 id="texto">Biblioteca Pessoal</h2>
		<p>Faça o seu login para acessar o sistema, ou realize o seu
			cadastro gratuitamente, clicando no link abaixo.</p>
		<div id="alert"></div>
		<h:outputText style="color: #FF0000" value="#{usuarioMB.mensagem}"
			rendered="#{usuarioMB.comMensagem}"></h:outputText>
		<h:outputText style="color: #0000FF" value="#{usuarioMB.msgOk}"
			rendered="#{usuarioMB.comMsgOk}"></h:outputText>
		<h:form id="form">
Login: <h:inputText id="login" styleClass="login" value="#{usuarioMB.login}"
				required="true">
				<f:validateLength minimum="2" maximum="5"></f:validateLength>
			</h:inputText>
			<br />
Senha: <h:inputSecret id="senha" styleClass="senha" value="#{usuarioMB.senha}"></h:inputSecret>
			<br />
			<h:commandButton id="logar" styleClass="logar" value="Efetuar Login"
				action="#{usuarioMB.autenticar}"></h:commandButton>
		</h:form>
		<hr />
		<h:form>
			<h:commandLink action="cadastroUsuario.jsp">
				<h:outputText value="Efetue o seu cadastro no sistema!"></h:outputText>
			</h:commandLink>
		</h:form>

	</f:view>

	<script type="text/javascript">
		$(document).ready(function(){
			$('.logar').click(function(evt){
				
				if($('.login').val() == '' || $('.senha').val() == ''){
					evt.preventDefault();
					$('#alert').html('<span style="color:red; font-weight=bold">Campos obrigatórios</span>');
				}else{
				
					$('.logar').click();
				
				}
				
			
			})
		
		})
		
	</script>
</body>
</html>